@extends('layouts.app')

@section('title', '首页 - ' . config('app.name'))

@section('content')
@php
    use App\Models\SiteSetting;
    $settings = SiteSetting::where('key', 'like', 'home_%')->get()->keyBy('key');
@endphp

<div class="container mt-4">
    <!-- 欢迎横幅 -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="jumbotron bg-light rounded-3 p-5 text-center">
                <h1 class="display-4">{{ $settings['home_welcome_title']->value ?? '欢迎来到文章管理系统' }}</h1>
                <p class="lead">{{ $settings['home_welcome_subtitle']->value ?? '这里汇集了各种精彩的文章内容，满足您的阅读需求' }}</p>
                <hr class="my-4">
                <p>{{ $settings['home_welcome_description']->value ?? '探索最新文章、热门内容，或者发布您自己的见解' }}</p>
                <a class="btn btn-primary btn-lg me-3" href="{{ route('articles.index') }}" role="button">
                    <i class="fas fa-book-open me-2"></i>浏览所有文章
                </a>
                @auth
                <a class="btn btn-outline-primary btn-lg" href="{{ route('articles.create') }}" role="button">
                    <i class="fas fa-edit me-2"></i>写文章
                </a>
                @else
                <a class="btn btn-outline-primary btn-lg" href="{{ route('login') }}" role="button">
                    <i class="fas fa-user me-2"></i>登录/注册
                </a>
                @endauth
            </div>
        </div>
    </div>

    <!-- 最新文章 -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="h4 mb-0">
                    <i class="fas fa-clock text-primary me-2"></i>最新文章
                </h2>
                <a href="{{ route('articles.index') }}" class="btn btn-sm btn-outline-primary">
                    查看全部 <i class="fas fa-arrow-right ms-1"></i>
                </a>
            </div>
            
            @if($latestArticles->count() > 0)
                <div class="row">
                    @foreach($latestArticles as $article)
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="card h-100 article-card">
                            @if($article->cover_image)
                            <img src="{{ $article->cover_image }}" class="card-img-top" alt="{{ $article->title }}" style="height: 200px; object-fit: cover;">
                            @else
                            <div class="card-img-top bg-secondary d-flex align-items-center justify-content-center" style="height: 200px;">
                                <i class="fas fa-image fa-3x text-white-50"></i>
                            </div>
                            @endif
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="badge bg-primary">{{ $article->category->name ?? '未分类' }}</span>
                                    <small class="text-muted">{{ $article->published_at->diffForHumans() }}</small>
                                </div>
                                <h5 class="card-title text-truncate">{{ $article->title }}</h5>
                                <p class="card-text text-muted small line-clamp-3">
                                    {{ Str::limit(strip_tags($article->content), 100) }}
                                </p>
                            </div>
                            <div class="card-footer bg-transparent border-top-0">
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">
                                        <i class="fas fa-user me-1"></i>{{ $article->author }}
                                    </small>
                                    <small class="text-muted">
                                        <i class="fas fa-calendar me-1"></i>{{ $article->published_at->format('Y-m-d') }}
                                    </small>
                                </div>
                                <a href="{{ route('articles.show', $article) }}" class="stretched-link"></a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-inbox fa-4x text-muted mb-3"></i>
                    <h5 class="text-muted">暂无文章</h5>
                    <p class="text-muted">还没有人发布文章，快来成为第一个吧！</p>
                    @auth
                    <a href="{{ route('articles.create') }}" class="btn btn-primary">
                        <i class="fas fa-edit me-2"></i>发布文章
                    </a>
                    @else
                    <a href="{{ route('login') }}" class="btn btn-primary">
                        <i class="fas fa-user me-2"></i>登录发布
                    </a>
                    @endauth
                </div>
            @endif
        </div>
    </div>

    <!-- 热门文章 -->
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="h4 mb-0">
                    <i class="fas fa-fire text-danger me-2"></i>热门文章
                </h2>
                <a href="{{ route('articles.index') }}?sort=popular" class="btn btn-sm btn-outline-danger">
                    查看全部 <i class="fas fa-arrow-right ms-1"></i>
                </a>
            </div>
            
            @if($popularArticles->count() > 0)
                <div class="row">
                    @foreach($popularArticles as $article)
                    <div class="col-md-6 col-lg-3 mb-4">
                        <div class="card h-100">
                            @if($article->cover_image)
                            <img src="{{ $article->cover_image }}" class="card-img-top" alt="{{ $article->title }}" style="height: 150px; object-fit: cover;">
                            @else
                            <div class="card-img-top bg-secondary d-flex align-items-center justify-content-center" style="height: 150px;">
                                <i class="fas fa-image fa-2x text-white-50"></i>
                            </div>
                            @endif
                            <div class="card-body">
                                <h6 class="card-title text-truncate">{{ $article->title }}</h6>
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="badge bg-success small">{{ $article->category->name ?? '未分类' }}</span>
                                    <span class="badge bg-danger">
                                        <i class="fas fa-fire me-1"></i>热门
                                    </span>
                                </div>
                                <a href="{{ route('articles.show', $article) }}" class="stretched-link"></a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-4">
                    <i class="fas fa-chart-line fa-3x text-muted mb-2"></i>
                    <p class="text-muted mb-0">暂无热门文章</p>
                </div>
            @endif
        </div>
    </div>

    <!-- 功能特色 -->
    <div class="row mt-5 pt-5 border-top">
        <div class="col-12 text-center mb-4">
            <h2 class="h3">为什么选择我们？</h2>
        </div>
        <div class="col-md-4 text-center mb-4">
            <div class="feature-icon mb-3">
                <i class="fas fa-pencil-alt fa-3x text-primary"></i>
            </div>
            <h5 class="mb-2">{{ $settings['home_feature1_title']->value ?? '便捷创作' }}</h5>
            <p class="text-muted">{{ $settings['home_feature1_description']->value ?? '简洁易用的编辑器，让您专注于内容创作' }}</p>
        </div>
        <div class="col-md-4 text-center mb-4">
            <div class="feature-icon mb-3">
                <i class="fas fa-users fa-3x text-success"></i>
            </div>
            <h5 class="mb-2">{{ $settings['home_feature2_title']->value ?? '社区互动' }}</h5>
            <p class="text-muted">{{ $settings['home_feature2_description']->value ?? '与志同道合的读者和作者交流互动' }}</p>
        </div>
        <div class="col-md-4 text-center mb-4">
            <div class="feature-icon mb-3">
                <i class="fas fa-lock fa-3x text-info"></i>
            </div>
            <h5 class="mb-2">{{ $settings['home_feature3_title']->value ?? '安全可靠' }}</h5>
            <p class="text-muted">{{ $settings['home_feature3_description']->value ?? '您的数据和隐私得到充分保护' }}</p>
        </div>
    </div>
</div>

<style>
.article-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.feature-icon {
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
}
.jumbotron {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
</style>
@endsection